<template>
<div class="app">
    <!-- 绑定一个ref -->
    <div ref="title"  :style="{color:thiscolor}">{{ message }}</div>
    <button ref="but" @click="changemessage">点击一下</button>
     <banner ref="isbanner"/>
</div>
</template>
<script>
import banner from './banner.vue'
export default {
    components: {
        banner
    },
    data() {
        return {
            message: 'hello vue',
            thiscolor:"red"
        }
    },
    methods:{
        changemessage() {
            this.message = "小染呀",
            this.thiscolor="blue",
            // 这里是refs 
            // 拿到自己组件的
            console.log(this.$refs.title)
            console.log(this.$refs.but)
            // 拿到子组件的实例对象
            // 也可以拿到方法
            console.log(this.$refs.isbanner.clickbanner);
            // 拿到的是第一个根
            console.log(this.$refs.isbanner.$el)
            // 拿到第二个根
            console.log(this.$refs.isbanner.$el.nextElementSibling)
        }
    }
    
}  
</script>
<style scoped lang="less">

</style>